import React, { useState, useCallback } from 'react';
import { Layout, Menu } from 'antd';
const { Header, Content } = Layout;
import { Outlet, useLocation, useNavigate } from 'umi';
import styles from './index.less';

const menuData = [
  { key: '/user', label: '用户管理' },
  { key: '/hero', label: '英雄' },
];

function App() {
  const { pathname } = useLocation();
  const navigate = useNavigate();

  const [selectKeys, setSelectKeys] = useState([pathname]);

  const handleClick = useCallback(({ key }) => {
    setSelectKeys([key]);
    navigate(key, { replace: true });
  }, []);

  return (
    <Layout style={{ height: '100%' }}>
      <Header>
        <div className={styles.logo}>Todo List</div>
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={selectKeys}
          style={{ lineHeight: '64px' }}
          items={menuData}
          onClick={handleClick}
        ></Menu>
      </Header>
      <Content className={styles.content}>
        <Outlet />
      </Content>
    </Layout>
  );
}

export default App;
